<template>
  <div id="register">
    <img
      class="close"
      @click="returnRouter"
      src="../../assets/image/images/loginImg/关闭.png"
      alt="关闭"
    />
    <h3>手机号注册</h3>
    <van-field
      type="number"
      label="国家/地区"
      readonly
      placeholder="中国大陆(+86)"
    />
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field
      v-model="userId"
      type="tel"
      label="手机号"
      placeholder="请填写手机号"
    />

    <!-- 输入密码 -->
    <van-field
      v-model="password"
      type="password"
      label="密码"
      placeholder="填写密码"
    />
    <!-- 输入密码 -->
    <van-field
      v-model="rePassword"
      type="password"
      label="重复密码"
      placeholder="填写密码"
    />
    <p>
      <button
        :class="{
          isCanPress: rePassword !== '' && password !== '' && userId !== '',
        }"
        @click="userRegister"
      >
        注册
      </button>
    </p>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import WebIM from "../../utils/WebIM";
import { toast } from "vant";
// import { compressImage } from "@/assets/js/compressImage";
export default {
  data() {
    return {
      userId: "",
      password: "",
      rePassword: "",
    };
  },
  computed: {
    // register.js会创建一个变量 isRouterLoginPage 存储是否成功注册的状态,为真:成功注册(注册成功跳转至登录页面), 为假:注册失败/为注册
    ...mapState({
      isRouterLoginPage: (state) => state.register.isRouterLoginPage,
    }),
  },
  watch: {
    //监视是否注册成功 注册成功跳转至登录页面
    isRouterLoginPage(newV) {
      let option = {
        userId: this.userId,
        password: this.password,
        rePassword: this.rePassword,
      };
      if (newV) {
        this.$router.push({
          name: "Login",
          params: {
            option,
            isRouterLoginPage: this.isRouterLoginPage,
          },
        });
      }
    },
  },
  created() {
    // 退出登录
    WebIM.conn.close();
    // 清除tonken
    this.$cookies.remove("wxUserToken");
  },
  methods: {
    // 模块中是否通过验证的函数:isRegisterByVerification
    ...mapActions(["isRegisterByVerification"]),
    returnRouter() {
      this.$router.go(-1);
    },
    //  点击注册的函数
    userRegister() {
      let option = {
        userId: this.userId,
        password: this.password,
        rePassword: this.rePassword,
      };
      this.isRegisterByVerification(option);
    },
  },
};
</script>
<style lang="scss" scoped>
#register {
  .close {
    margin: 15px 10px;
    width: 25px;
  }
  h3 {
    text-align: center;
    margin-top: 50px;
    font-size: 22px;
  }
  p {
    margin: 20px 0;
    text-align: center;
    button {
      border: 0px solid #000;
      outline: 0px solid #000;
      width: 60%;
      padding: 15px 0;
      border-radius: 5px;
    }

    .isCanPress {
      color: #fff;
      background-color: var(--theme-freech-green);
    }
  }
}
</style>


